<template>
	<view>
		<u-navbar title="个人信息" :background="navBg" titleColor="#fff" backIconColor="#fff" :borderBottom="false">
			<view v-if="canEdit" slot="right" class="navbar-style" >
				<view v-if="!edit" @click="edit = true">编辑</view>
				<view v-else @click="handleSave">保存</view>
			</view>
		</u-navbar>
		<view v-if="edit">
			<view class="h-box padding-style">
				<view class="flex-extend">头像</view>
				<view>
					<!-- <image :src="formData.avatar" class="image-style"></image> -->
					<uni-file-picker :imageStyles="{width: '150rpx', height: '150rpx'}" v-model="avatarData" returnType="object" limit="1"></uni-file-picker>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<u-line></u-line>
			<view class="h-box padding-style">
				<view class="flex-extend">昵称</view>
				<u-input v-model="formData.nickname "></u-input>
			</view>
			<u-line></u-line>
			<view class="h-box padding-style">
				<view class="flex-extend">性别</view>
				<view @click="genderShow = true">{{gender}}</view>
				<u-icon @click="genderShow = true" name="arrow-right"></u-icon>
				<u-select :default-value="[formData.gender]" v-model="genderShow" :list="genderList"
					@confirm="handleGender"></u-select>
			</view>
			<u-line></u-line>
			<view class="h-box padding-style">
				<view class="flex-extend">生日</view>
				<view @click="timeShow = true">
					<view v-if="formData.birthdayDate">
						{{$formatTime(formData.birthdayDate,pattern = 'YYYY-MM-DD')}}
					</view>
					<view v-else>-</view>
				</view>
				<u-icon @click="timeShow = true" name="arrow-right"></u-icon>
				<u-picker mode="time" :default-time="defaultTime" v-model="timeShow" @confirm="handleTime">
				</u-picker>
			</view>
			<u-line></u-line>
			<view class="h-box padding-style">
				<view class="flex-extend">星座</view>
				<view @click="constellationShow = true">{{formData.constellation || '-'}}</view>
				<u-icon @click="constellationShow = true" name="arrow-right"></u-icon>
				<u-select :default-value="[defaultConstellation]" v-model="constellationShow" :list="constellationList"
					@confirm="handleConstellation"></u-select>
			</view>
			<u-line></u-line>
			<view class="h-box padding-style">
				<view class="flex-extend">交友宣言</view>
				<u-input v-model="formData.declarationDating "></u-input>
			</view>
			<u-line></u-line>
			<view class="h-box padding-style">
				<view class="flex-extend">向其他玩家展示</view>
				<u-switch v-model="formData.othersCanView"></u-switch>
			</view>
		</view>
		<view v-else>
			<view v-if="canLook">
				<view class="h-box padding-style">
					<view class="flex-extend">头像</view>
					<view>
						<image :src="formData.avatar" class="image-style"></image>
					</view>
					<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
				<u-line></u-line>
				<view class="h-box padding-style">
					<view class="flex-extend">昵称</view>
					<view>{{formData.nickname || '-'}}</view>
				</view>
				<u-line></u-line>
				<view class="h-box padding-style">
					<view class="flex-extend">性别</view>
					<view>{{gender}}</view>
				</view>
				<u-line></u-line>
				<view v-if="canEdit" class="h-box padding-style">
					<view class="flex-extend">会员ID</view>
					<view>{{formData.id}}</view>
				</view>
				<u-line></u-line>
				<view v-if="canEdit" class="h-box padding-style">
					<view class="flex-extend">生日</view>
					<view v-if="formData.birthdayDate">
						{{$formatTime(formData.birthdayDate,pattern = 'YYYY-MM-DD')}}
					</view>
					<view v-else>-</view>
				</view>
				<u-line></u-line>
				<view class="h-box padding-style">
					<view class="flex-extend">星座</view>
					<view>{{formData.constellation || '-'}}</view>
				</view>
				<u-line></u-line>
				<view class="h-box padding-style">
					<view class="flex-extend">交友宣言</view>
					<view>{{formData.declarationDating || '-'}}</view>
				</view>
				<u-line></u-line>
				<view v-if="canEdit">
					<view class="h-box padding-style">
						<view class="flex-extend">手机号</view>
						<view>{{formData.mobile || '-'}}</view>
					</view>
					<u-line></u-line>
					<view class="h-box padding-style">
						<view class="flex-extend">向其他玩家展示</view>
						<view>{{formData.othersCanView? '是':'否'}}</view>
					</view>
				</view>
				<u-line></u-line>
				<navigator url="/pagesAuth/auth">
					<view class="h-box padding-style">
						<view class="flex-extend">实名认证</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</navigator>
				<!-- <view class="h-box padding-style">
					<view class="flex-extend">个人认证</view>
					<view>--</view>
				</view>
				<u-line></u-line> -->
			</view>
			<view v-else class="v-box">
				该用户设置查看权限
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import {
		updateUserinfo,
		getUserForId
	} from "../../api/platform/user.js"

	export default {
		data() {
			return {
				navBg: {
					'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)'
				},
				avatarData: {
					url: ''
				},
				formData: {},
				canEdit: false,
				canLook: false,
				edit: false,
				genderShow: false,
				genderList: [{
					value: 0,
					label: '未知'
				}, {
					value: 1,
					label: '男'
				}, {
					value: 2,
					label: '女'
				}],
				timeShow: false,
				defaultTime: '',
				constellationShow: false,
				constellationList: [{
					value: 0,
					label: '白羊座'
				}, {
					value: 1,
					label: '金牛座'
				}, {
					value: 2,
					label: '双子座'
				},{
					value: 3,
					label: '巨蟹座'
				}, {
					value: 4,
					label: '狮子座'
				}, {
					value: 5,
					label: '处女座'
				},{
					value: 6,
					label: '天秤座'
				}, {
					value: 7,
					label: '天蝎座'
				}, {
					value: 8,
					label: '射手座'
				},{
					value: 9,
					label: '摩羯座'
				}, {
					value: 10,
					label: '水瓶座'
				}, {
					value: 11,
					label: '双鱼座'
				}],
				defaultConstellation: 0
			}
		},
		computed: {
			...mapState(["userInfo"]),

			gender() {
				if(this.formData.gender == 0) {
					return '未知'
				}else if(this.formData.gender == 1) {
					return '男'
				}else {
					return '女'
				}
			}
		},
		onLoad(option) {
			if (option.id) {
				this.formData._id = option.id;
				if(this.formData._id == this.userInfo.id) {
					//用户查看自己的信息（可修改）
					this.formData = {
						...this.userInfo
					}
					this.avatarData.url = this.userInfo.avatar || ''
					this.canEdit = true
					this.canLook = true
				}else {
					//用户查看别人的信息（不可修改）
					this.getUserForId(this.formData._id)
				}
				this.defaultTime =this.$formatTime(this.formData.birthdayDate)
				for(var i=0; i<this.constellationList.length; i++) {
					if(this.constellationList[i].label == this.formData.constellation) {
						this.defaultConstellation = i
						break
					}
				}
			}
		},
		// async onReady() {
		// 	if (this.formData._id) {
		// 		//console.log("qqq",this.formData)
				
		// 	}
		// },
		methods: {
			...mapMutations(['updateUserInfo']),
			
			//保存按钮的点击
			async handleSave() {
				uni.showLoading({
					mask: true
				})
				try {
					let temp = {
						avatar: this.avatarData.url,
						nickname: this.formData.nickname,
						gender: this.formData.gender,
						birthdayDate: this.formData.birthdayDate,
						constellation: this.formData.constellation,
						declarationDating: this.formData.declarationDating,
						othersCanView: this.formData.othersCanView
					}
					console.log('updateUnserinfo', temp)
					await updateUserinfo({
						userinfo: temp
					});
					this.formData.avatar = temp.avatar
					this.updateUserInfo({
						...this.formData
					});
					uni.showToast({
						title: "修改成功",
						icon: "none"
					})
					this.edit = false
					uni.hideLoading()
				} catch (e) {
					this.$log(e);
					console.log(e)
					uni.hideLoading()
				}
			},
			
			//获取别人的用户信息
			async getUserForId(userId) {
				uni.showLoading({
					mask: true
				})
				try {
					let res = await getUserForId({
						userId: parseInt(userId)
					});
					if(res) {
						this.formData = res
						this.canLook = true
					}
					uni.hideLoading()
				} catch (e) {
					this.$log(e);
					uni.hideLoading()
				}
			},

			//确定选择的性别
			handleGender(value) {
				this.formData.gender = value[0].value
			},

			//选择生日
			handleTime(value) {
				this.defaultTime = this.$formatTime(value.timestamp * 1000)
				this.formData.birthdayDate = value.timestamp * 1000
			},

			//选择星座
			handleConstellation(value) {
				this.defaultConstellation = value[0].value
				this.formData.constellation = value[0].label
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar-style {
		color: #FFFFFF;
		padding-right: 20rpx;
	}

	.image-style {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}

	.padding-style {
		padding:10rpx 20rpx;
	}

	.img-gender {
		width: 36rpx;
		height: 36rpx;
	}
</style>
